<template>
  <el-drawer v-model="dialogVisible" size="45%">
    <!-- 标题 -->
    <template #header>
      <div class="dialog-title">
        <SvgIcon icon="ep:info-filled" size="19" style="margin-right: 5px;"></SvgIcon>
        <span>提现申请记录</span>
      </div>
    </template>
    <el-card class="content-card">
      <el-descriptions :column="responsiveState.column" title="提现信息">
        <el-descriptions-item :width="itemWidth" label="申请金额：">
          <span class="fw-500">{{ numeral(infoData.amount).format('0.00') }}</span>
        </el-descriptions-item>
        <el-descriptions-item :width="itemWidth" label="实际到账：">
          <span class="fw-500" style="color: #F32A23;">{{ numeral(infoData.actual_amount).format('0.00') }}</span>
        </el-descriptions-item>
        <el-descriptions-item :width="itemWidth" label="手续费：">
          <span class="fw-500">{{ numeral(infoData.poundage_fee).format('0.00') }}</span>
        </el-descriptions-item>

        <el-descriptions-item :width="itemWidth" label="提现类型：">
          <DictTag v-model="infoData.type" :circle="false" dict-type="withdraw_type"/>
        </el-descriptions-item>
        <el-descriptions-item :width="itemWidth" label="提现状态：">
          <DictTag v-model="infoData.status" :circle="false" dict-type="withdraw_status"/>
        </el-descriptions-item>
        <el-descriptions-item :width="itemWidth" label="申请时间：">
          <span>{{ infoData.create_time || '-' }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-divider border-style="dashed"/>

    <el-card class="content-card">
      <el-descriptions :column="responsiveState.column" title="用户信息">
        <el-descriptions-item :width="itemWidth" label="用户编号：">
          <span>{{ infoData.user_id || '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item :width="itemWidth" label="收款账户：">
          <DictTag v-model="infoData.account_type" :circle="false" dict-type="withdraw_account_type"/>
        </el-descriptions-item>

        <template v-if="infoData.account_type === 1">
          <el-descriptions-item :width="itemWidth" label="持卡人：">
            <span>{{ infoData.holder || '-' }}</span>
          </el-descriptions-item>
          <el-descriptions-item :width="itemWidth" label="银行卡号：">
            <span>{{ infoData.card_no || '-' }}</span>
          </el-descriptions-item>
          <el-descriptions-item :width="itemWidth" label="开户银行：">
            <span>{{ infoData.bank_name || '-' }}</span>
          </el-descriptions-item>
        </template>

        <template v-if="infoData.account_type === 2">
          <el-descriptions-item :width="itemWidth" label="支付宝姓名：">
            <span>{{ infoData.alipay_name || '-' }}</span>
          </el-descriptions-item>
          <el-descriptions-item :width="itemWidth" label="支付宝账号：">
            <span>{{ infoData.alipay_account || '-' }}</span>
          </el-descriptions-item>
        </template>

      </el-descriptions>
    </el-card>

    <el-divider border-style="dashed"/>

    <el-card class="content-card">
      <el-descriptions :column="responsiveState.column" title="审核信息">
        <el-descriptions-item :width="itemWidth" label="审核时间：">
          <span>{{ infoData.audit_time || '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item :width="itemWidth" label="审核理由：">
          <span>{{ infoData.audit_reason || '-' }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-divider border-style="dashed"/>

    <el-card class="content-card">
      <el-descriptions :column="responsiveState.column" title="打款信息">
        <el-descriptions-item :width="itemWidth" label="打款时间：">
          <span>{{ infoData.payment_trade_time || '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item :width="itemWidth" label="打款单号：">
          <span>{{ infoData.payment_trade_no || '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item :width="itemWidth" label="打款结果：">
          <span>{{ infoData.payment_trade_desc || '-' }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <template v-if="hasPermission('withdraw:record:audit') && infoData.status === 10" #footer>
      <div style="flex: auto">
        <el-button type="primary" @click="handleAudit(1)">通过</el-button>
        <el-button type="danger" @click="handleAudit(0)">驳回</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import useDialog from '@/hooks/use-dialog.ts';
import { SvgIcon } from '@/components/icon';
import { ref } from 'vue';
import { WithdrawRecord, withdrawRecordInfo } from '@/api/api-finance.ts';
import { useResponsiveState } from '@/hooks/use-responsive-state.ts';
import { DictTag } from '@/components/dict-tag';
import numeral from 'numeral';
import { hasPermission } from '@/utils/permission.ts';

const {dialogVisible} = useDialog(false);

const itemId = ref(0);
const loading = ref(false);
const defInfoData: WithdrawRecord = <WithdrawRecord>{};
const infoData = ref({...defInfoData});
const itemWidth = ref('130px')
const responsiveState = useResponsiveState(
    {
      ['lg']: {column: 2},
      ['sm']: {column: 2},
      ['xs']: {column: 1},
    },
    {column: 3,},
);

/** 打开弹窗 */
const open = async (id: number) => {
  itemId.value = id;
  dialogVisible.value = true;

  // 重置数据
  infoData.value = {...defInfoData};

  loading.value = true
  try {
    // 加载用户数据
    const {data} = await withdrawRecordInfo(id)
    infoData.value = data;
  } finally {
    loading.value = false
  }
};

/** 调用父组件进行审核操作 */
const emit = defineEmits(['audit'])
const handleAudit = async (status: number) => {
  emit('audit', infoData.value, status)
}

// 提供 open 方法，用于打开弹窗
defineExpose({open})
</script>

<style lang="scss" scoped>
:deep() {
  .el-descriptions__label {
    margin-right: 0;
    display: inline-block;
    min-width: 68px;
    vertical-align: top;
  }

  .el-descriptions__cell {
    vertical-align: top;
    font-size: 13px !important;
  }

  .el-divider--horizontal {
    margin: 8px 0 !important;
  }

  .el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell {
    padding-bottom: 6px;
  }
}

</style>
